<template>
<!-- 滚动事件一定要给滚动盒子添加 -->
  <div class="page" @scroll="scroll" ref="scolldom">
    <header v-show="showHeader">
      <img @click="goTop" src="../../assets/img/jingtian.jpeg" alt="">
    </header>
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
          <img :src="item.picUrl" alt="" />
        </van-swipe-item>
      </van-swipe>
      <ul>
        <li>
          <img src="../../assets/img/love.png" alt="" />
          <p>签到</p>
        </li>
        <li>
          <img src="../../assets/img/lv.png" alt="" />
          <p>礼券</p>
        </li>
        <li>
          <img src="../../assets/img/wg.png" alt="" />
          <p>砍价</p>
        </li>
        <li>
          <img src="../../assets/img/dp.png" alt="" />
          <p>专栏</p>
        </li>
      </ul>
    </div>
    <my-title>全民砍价</my-title>
    <my-title>精选专题</my-title>
    <div class="news">
      <ul>
        <li v-for="(item, index) in newsList" :key="index">
          <img :src="item.pic" alt="" />
          <h6>{{ item.title }}</h6>
          <p>{{ item.descript }}</p>
        </li>
      </ul>
    </div>
    <my-title @click="jump">人气推荐</my-title>
    <div class="people">
      <my-cart v-for="(item,index) in goodsList" :key="index" :itemObj="item" @click="goDetail(item)"></my-cart>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { getBanner, getNews, getGoods } from "../../api/home/index"; 
import { useRouter } from 'vue-router';
import myTitle from "../../components/myTitle.vue";
import MyCart from '../../components/myCart.vue';
export default {
  components: { myTitle, MyCart },
  comments: {},
  setup() {
    const bannerList = ref([]);
    getBanner({ id: 1 }).then((res) => {
      // 请求banner的接口
      bannerList.value = res.data;
      // console.log(res);
    });
    const data = reactive({
      newsList: [], // 文章列表数据
      goodsList: [], // 商品列表数据
      showHeader: false, // 是否显示头部
    });
    getNews().then((res) => {
      // 文章的请求
      data.newsList = res.data;
    });
    // page 显示页数 pageSize 每页显示多少条
    getGoods({page:3,pageSize:4}).then(res => { // 商品列表的请求
       data.goodsList = res.data;
    })

    let dom = null; // 滚动盒子的dom节点
    let topNum = 0; // 记录一下滚动的高度
    // 滚动事件
    const scroll = (e) => { // e 事件对象
      // scrollTop 滚动条距离顶部的距离
      //  console.log(e.target.scrollTop);
      dom = e.target;
      topNum = e.target.scrollTop;
      if (e.target.scrollTop > 400){
        data.showHeader = true
      } else {
        data.showHeader = false
      }
    }
    // const scolldom = ref(null) // 可以通过ref来获取dom元素
    const goTop = () => { // 回到顶部的事件
      //  dom.scrollTop = 0;
      //  console.log(topNum);
      // console.log(scolldom.value);
      let time = setInterval(() => {
        // topNum 大于 0 是没有在顶部的
        if (topNum>0){
          topNum = topNum - 10;
          dom.scrollTop = topNum
        } else {
          clearInterval(time)
        }
      },1)
    }
    
    const router = useRouter(); // 获取router的对象
    // console.log(router);
    const jump = () => { // 人气推荐的页面跳转
      router.push('/people');
    }

    const goDetail = (val) => { // 跳转到详情页的函数
      //  console.log(val);
      // query 传参
      // router.push({path:'/detail',query:{id:val.id,num:10}})
      // router.push(`/detail?id=${val.id}&num=${10}`)
      // router.push({name:'Detail',params:{id:val.id}})
       router.push(`/detail/${val.id}`);
    }
    return {
      bannerList,
      ...toRefs(data),
      scroll,
      goTop,
      jump,
      goDetail
      // scolldom
    };
  },
};
</script>
<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  img {
    width: 100%;
  }
}
header{
  height: 50px;
  display: flex;
  background: #fff;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  z-index: 99;
  img{
    height: 80%;
    border-radius: 5px;
  }
}
.banner {
  position: relative;
  ul {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 20% 20% 0 0;
    padding: 10px 0;
    li {
      display: inline-block;
      width: 25%;
      font-size: 16px;
      text-align: center;
      img {
        width: 50%;
      }
      p {
        text-align: center;
        margin-top: 10px;
      }
    }
  }
}
.news {
  width: 100%;
  overflow-x: auto;
  ul {
    display: flex;
    background: #fff;
    width: calc(5 * 329px);
    padding-bottom: 10px;
    li {
      width: 319px;
      margin-left: 10px;
      font-size: 14px;
      img {
        width: 100%;
        height: 205px;
        border-radius: 5px;
      }
      h6,
      p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 10px;
      }
      p{
        font-size: 12px;
        color: #A8A8A8;
      }
    }
  }
}
.people{
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  background: #fff;
  flex-wrap: wrap;
}
</style>